<template>
    <div class="login-wrap" :style="{height: windowHeight+'px'}">
        <div class="ms-login">
            <div class="ms-title">重新设置密码</div>
      
            <el-form :model="param" :rules="rules" ref="login" label-width="80px" class="ms-content">
                <el-form-item prop="username" label="账号" required>
                    <el-input v-model="param.username" placeholder="请输入账号">
                        <el-button slot="prepend" icon="el-icon-user"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password" label="密码" required>
                    <el-input type="password" placeholder="请输入密码" v-model="param.password"  >
                        <el-button slot="prepend" icon="el-icon-lock"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="checkPass" label="确认密码" required>
                    <el-input type="password" placeholder="请确认密码" v-model="param.checkPass"  >
                        <el-button slot="prepend" icon="el-icon-lock"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="verification" label="验证码">
                    <el-input placeholder="请输入验证码" v-model="param.verification" required>
                        <el-button slot="prepend" icon="el-icon-lock"></el-button>
                    </el-input>
                </el-form-item>
              
                <div class="login-btn">
                    <el-button type="warning" @click="changeForm(true)">取消</el-button>
                    <el-button type="primary" @click="submitForm()">立即更新</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data: function() {
        var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.param.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
        return {
            windowHeight: document.documentElement.clientHeight,
            param: {
                username: '',
                password: '',
                checkPass: '',
                verification: '',
            },
            rules: {
                username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                checkPass: [{ validator: validatePass, trigger: 'blur' }],
                verification: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
            },
        };
    },
    methods: {
        changeForm() {
            this.params = {
               username: '',
                password: '',
                checkPass: '',
                verification: ''
            }
            this.$router.push('/');
        },
        submitForm() {
            this.$refs.login.validate(valid => {
                if (valid ) {
                    this.submit();
                } else {
                    this.$message.error('请检查输入条件');
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        submit() {
            let that = this;
            let params = {
                username: this.param.username,
                password: this.param.password,
                code: this.param.verification
            };
            let url = '/signin/userInfo/verification?serviceId=1';
            const headers = {
                'Content-Type': 'application/json;charset=UTF-8',
            };

            this.$axios.post(url, params, {headers}).then((res) => {
                if(res.data.code == 200){
                    this.$message.success(res.data.msg);
                    this.$router.push('/');
                }else{
                    this.$message.error(res.data.msg);
                };
            }).catch((error) => {
                console.warn(error);
            });
         
        }
    },
};
</script>

<style scoped>
.login-wrap {
    position: relative;
    width: 100%;
    background-color: #001254;
}
.ms-title {
    width: 100%;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    border-bottom: 1px solid #ddd;
}
.ms-login {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 500px;
    margin: -230px 0 0 -250px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
}
.ms-content {
    padding: 30px 30px;
}
.login-btn {
    text-align: center;
    display: flex;
    flex-direction: row-reverse;
}
.login-btn button {
    height: 36px;
    margin-left: 10px;
}
.login-tips {
    font-size: 12px;
    line-height: 30px;
    color: #fff;
    margin-left: 80px;
    margin-bottom: 10px;
}

 .ms-content /deep/ .el-form-item__label{
    color: #fff;
    }
</style>